/*=========================================*/
/*==========City Transition CSS============*/
/*=========================================*/
.transition {
	opacity: -OPACITY-;
	z-index: 2;
}
.buildingimg {
	z-index: 1;
}
#locations li a {
	z-index: 3;
}

/*-------------------------------*/
/*----------City Phases----------*/
/*-------------------------------*/
#mainview_transition {
	height: 440px;
	width: 720px;
}
#city #mainview_transition, #worldmap_iso #mainview_transition {
	margin-top: -440px;
}

#city #container .phase1 #mainview_transition {
	background-image: url(-WEBADDRESS--EFFECT-/city/bg/city_phase1.jpg);
}
#city #container .phase2 #mainview_transition,
#city #container .phase3 #mainview_transition {
	background-image: url(-WEBADDRESS--EFFECT-/city/bg/city_phase2.jpg);
}
#city #container .phase4 #mainview_transition,
#city #container .phase5 #mainview_transition, 
#city #container .phase6 #mainview_transition {
	background-image: url(-WEBADDRESS--EFFECT-/city/bg/city_phase3.jpg);
}
#city #container .phase7 #mainview_transition, 
#city #container .phase8 #mainview_transition,
#city #container .phase9 #mainview_transition {
	background-image: url(-WEBADDRESS--EFFECT-/city/bg/city_phase4.jpg);
}
#city #container .phase10 #mainview_transition,
#city #container .phase11 #mainview_transition,
#city #container .phase12 #mainview_transition {
	background-image: url(-WEBADDRESS--EFFECT-/city/bg/city_phase5.jpg);
}
#city #container .phase13 #mainview_transition,
#city #container .phase14 #mainview_transition,
#city #container .phase15 #mainview_transition {
	background-image: url(-WEBADDRESS--EFFECT-/city/bg/city_phase6.jpg);
}
#city #container .phase16 #mainview_transition,
#city #container .phase17 #mainview_transition,
#city #container .phase18 #mainview_transition {
	background-image: url(-WEBADDRESS--EFFECT-/city/bg/city_phase7.jpg);
}

/*-------------------------------*/
/*-----------Buildings-----------*/
/*-------------------------------*/
#city #container #mainview #locations .museum .transition {
	left: -8px;
	top: -38px;
	width: 105px;
	height: 85px;
	position: relative;
	background-image: url(-WEBADDRESS--EFFECT-/city/buildings/building_museum.gif);
}
#city #container #mainview #locations .shipyard .transition {
	left: -22px;
	top: -20px;
	width: 129px;
	height: 100px;
	position: relative;
	background-image: url(-WEBADDRESS--EFFECT-/city/buildings/building_shipyard.gif);
}
#city #container #mainview #locations .warehouse .transition {
	left: 0px;
	top: -33px;
	width: 126px;
	height: 86px;
	position: relative;
	background-image: url(-WEBADDRESS--EFFECT-/city/buildings/building_warehouse.gif);
}
#city #container #mainview #locations .wall .transition {
	left: -500px;
	top: -15px;
	width: 720px;
	height: 137px;
	position: relative;
	background-image: url(-WEBADDRESS--EFFECT-/city/buildings/building_wall.gif);
}
#city #container #mainview #locations .tavern .transition {
	left: -10px;
	top: -15px;
	width: 111px;
	height: 65px;
	position: relative;
	background-image: url(-WEBADDRESS--EFFECT-/city/buildings/building_tavern.gif);
}
#city #container #mainview #locations .palace .transition {
	left: -10px;
	top: -42px;
	width: 106px;
	height: 97px;
	position: relative;
	background-image: url(-WEBADDRESS--EFFECT-/city/buildings/building_palace.gif);
}
#city #container #mainview #locations .academy .transition {
	left: -19px;
	top: -31px;
	width: 123px;
	height: 90px;
	position: relative;
	background-image: url(-WEBADDRESS--EFFECT-/city/buildings/building_academy.gif);
}
#city #container #mainview #locations .workshop-army .transition {
	left: -19px;
	top: -31px;
	width: 106px;
	height: 85px;
	position: relative;
	background-image: url(-WEBADDRESS--EFFECT-/city/buildings/building_workshop.gif);
}
#city #container #mainview #locations .safehouse .transition {
	left:5px;
	top:-15px;
	width:84px;
	height:58px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/city/buildings/building_safehouse.gif);
}
#city #container #mainview #locations .branchOffice .transition {
	left: -19px;
	top: -31px;
	width: 109px;
	height: 84px;
	position: relative;
	background-image: url(-WEBADDRESS--EFFECT-/city/buildings/building_branchOffice.gif);
}
#city #container #mainview #locations .embassy .transition {
	left: -5px;
	top: -31px;
	width: 93px;
	height: 85px;
	position: relative;
	background-image: url(-WEBADDRESS--EFFECT-/city/buildings/building_embassy.gif);
}
#city #container #mainview #locations .palaceColony .transition {
	left: -10px;
	top: -42px;
	width: 109px;
	height: 95px;
	position: relative;
	background-image: url(-WEBADDRESS--EFFECT-/city/buildings/building_palaceColony.gif);
}
#city #container #mainview #locations .townHall .transition {
	left: -5px;
	top: -60px;
	width: 104px;
	height: 106px;
	position: relative;
	background-image: url(-WEBADDRESS--EFFECT-/city/buildings/building_townhall.gif);
}
#city #container #mainview #locations .barracks .transition {
	left: 0px;
	top: -33px;
	width: 100px;
	height: 76px;
	position: relative;
	background-image: url(-WEBADDRESS--EFFECT-/city/buildings/building_barracks.gif);
}
#city #container #mainview #locations .port .transition {
	left: -65px;
	top: -35px;
	width: 163px;
	height: 131px;
	position: relative;
	background-image: url(-WEBADDRESS--EFFECT-/city/buildings/building_port.gif);
}
#city #container #mainview #locations li .constructionSite ~ .transition {

	left: -20px;
	top: -30px;
	width: 114px;
	height: 81px;
	position: relative;
	background-image: url(-WEBADDRESS--EFFECT-/city/buildings/constructionSite.gif);
}

/*-------------------------------*/
/*-------------Flags-------------*/
/*-------------------------------*/
#city #container #mainview #locations .buildingGround.land .transition {
	width: 29px;
	height: 40px;
	bottom: 15px;
	left: 36px;
	position: relative;
	background-image: url(-WEBADDRESS--EFFECT-/city/flags/flag_red.gif);
}
#city #container #mainview #locations .buildingGround.land a[title$="research bureaucracy"] + .transition {
	background-image: none !important;
}
#city #container #mainview #locations .buildingGround.shore .transition {
	width: 29px;
	height: 40px;
	bottom: 15px;
	left: 36px;
	position: relative;
	background-image: url(-WEBADDRESS--EFFECT-/city/flags/flag_blue.gif);
}
#city #container #mainview #locations .buildingGround.wall .transition {
	width: 29px;
	height: 40px;
	bottom: 15px;
	left: 36px;
	position: relative;
	background-image: url(-WEBADDRESS--EFFECT-/city/flags/flag_yellow.gif);
}
